* {
  margin: 0;
  // padding: 0;
  box-sizing: border-box;
}

/* HTML和BODY的基础设置 */
html,
body {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 列表样式重置 */
ul,
ol {
  list-style: none;
}

/* 链接样式重置 */
a {
  text-decoration: none;
  color: inherit;

  &:hover {
    text-decoration: none;
  }
}

/* 输入框样式重置 */
input,
textarea {
  border: none;
  outline: none;

  &:focus {
    outline: none;
  }
}

/* 图片默认样式 */
img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

//滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #909399;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: #f5f7fa;
}

// 弹性布局
@mixin flex($direction: row, $justify: center, $align: center) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

// 绝对定位居中
@mixin absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 文本溢出省略
@mixin text-ellipsis($lines: 1) {
  @if $lines ==1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// 滚动条样式
@mixin scrollbar($width: 6px, $thumb-color: #909399, $track-color: #f5f7fa) {
  &::-webkit-scrollbar {
    width: $width;
    height: $width;
  }

  &::-webkit-scrollbar-thumb {
    background: $thumb-color;
    border-radius: $width / 2;
  }

  &::-webkit-scrollbar-track {
    background: $track-color;
  }
}

// 清除浮动
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 固定宽高比
@mixin aspect-ratio($width: 1, $height: 1) {
  position: relative;

  &::before {
    content: '';
    display: block;
    padding-top: percentage($height / $width);
  }
}

// 渐变背景
@mixin gradient($direction: to right, $start-color: #409eff, $end-color: #337ecc) {
  background: linear-gradient($direction, $start-color, $end-color);
}

// 多行文本垂直居中
@mixin text-center($height) {
  height: $height;
  line-height: $height;
  text-align: center;
}

// 阴影效果
@mixin box-shadow($level: 'normal') {
  @if $level =='light' {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  @else if $level =='normal' {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  @else if $level =='heavy' {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }
}